<template>
  <div>
    <div class="already" v-if="token">
      <h1>
        您已登录，请前往
        <router-link to="/home">主页</router-link>
      </h1>
    </div>
    <div class="loginBox" v-else>
      <div class="title">
        <span @click="Type=0">登录</span>
        <span @click="Type=1">注册</span>
      </div>
      <div v-show="Type===0" class="Box">
        <div class="Input">
          <el-input v-model="log.username" placeholder="请输入账号" clearable></el-input>
          <el-input v-model="log.password" placeholder="请输入密码" show-password></el-input>
        </div>
        <div class="btn">
          <el-button type="primary" @click="Login">登录</el-button>
        </div>
      </div>
      <div v-show="Type===1" class="Box">
        <div class="Input">
          <el-input v-model="reg.username" placeholder="请输入注册用户名" clearable></el-input>
          <el-input v-model="reg.password" placeholder="请输入密码" show-password></el-input>
        </div>
        <div class="btn">
          <el-button type="success" @click="Register">注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "logReg",
  inject: ['reload'],
  data() {
    return {
      chose: '',
      token: '',
      Type: 0,
      log: {
        username: '',
        password: '',
      },
      reg: {
        username: '',
        password: '',
      },
    }
  },
  created() {
    this.check_user_login();
  },
  methods: {
    check_user_login() {
      this.token = sessionStorage.user_token || localStorage.user_token;
      return this.token;
    },
    Login() {
      if (this.log.password === '' || this.log.username === '') {
        this.$message.error('账号或密码不能为空');
        return false;
      }
      this.$axios.post(`${this.$settings.HOST}/user/login/`, {
        username: this.log.username,
        password: this.log.password,
      }).then(response => {
        sessionStorage.user_token = response.data.access;
        sessionStorage.user_id = response.data.id;
        sessionStorage.user_name = response.data.username;
        sessionStorage.stated = response.data.stated
        let self = this;
        this.$alert('登录成功', '疫情舆论分析系统', {
          callback() {
            self.$router.push('/home');
          }
        });
      }).catch(error => {
        this.$message.error('账号或密码错误，请重试！');
      });
    },
    Register() {
      this.$axios.post(`${this.$settings.HOST}/user/register/`, {
        username: this.reg.username,
        password: this.reg.password,
      }).then(response => {
        sessionStorage.user_id = response.data.id;
        sessionStorage.user_name = response.data.username;
        sessionStorage.user_token = response.data.token;
        sessionStorage.stated = response.data.stated
        let self = this;
        this.$alert('注册成功', '疫情舆论分析系统', {
          callback() {
            self.$router.push('/home');
          }
        });
      }).catch(error => {
        this.$message.error('注册失败，请确保已输入要注册的账号密码');
        console.log(error.response.data);
      });
    },
  }
}
</script>

<style scoped>
.loginBox {
  margin: 8% 38%;
  width: 24%;
  min-height: 30vh;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1px);
}

.loginBox a {
  padding-top: 20px;
  padding-right: 15px;
  float: right;
  text-decoration: none;
  color: rgb(6, 6, 162);
}

.loginBox a:hover {
  color: white;
}

.loginBox .title {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid darkblue;
}

.loginBox .title span {
  font-size: 20px;
  color: rgb(136, 136, 204);
  cursor: pointer;
  padding: 0 20px;
}

.loginBox .title span:hover {
  color: white;
}

.Box {
  padding: 20px;
}

.Box .btn {
  text-align: center;
}

.Box .el-button {
  border-radius: 8px;
  padding: 12px 126px;
}

.Box .Input {
  padding: 15px 20px;
}

.Box .Input .el-input {
  padding: 20px 0;
}

.already {
  position: absolute;
}

.already h1 {
  padding: 10vh 15vw;
  font-size: 100px;
}
</style>